<template>
  <div>
    <div class="color">

      环比：同一鱼池的不同时间段投喂量对比</div>
    <div style="height: 5rem; border-radius: 5px">
      <el-form style="margin: 3rem; margin-top: 1rem; padding-top: 1rem" ref="searchForm" :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="">
          <el-cascader v-if="userType == 0" v-model="searchForm.companyId" placeholder="请选择公司名称" :options="companyArray" :props="{
              checkStrictly: true,
              value: 'id',
              label: 'name',
              children: 'childList',
            }" style="width: 150px" @change="changeTreeItem" clearable></el-cascader>
        </el-form-item>
        <el-form-item label="">
          <el-select v-model="searchForm.baseId" @change="changeBase" placeholder="请选择基地名称" style="width: 150px !important" clearable>
            <el-option v-for="item in baseArray" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="">
          <el-select v-model="searchForm.ids" @change="getIds" clearable collapse-tags style="width: 150px !important" placeholder="请选择鱼池">
            <el-option v-for="item in FishpondDevicesList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="">
          <el-date-picker @change="getDates" type="dates" align="right" v-model="searchForm.startAndEndTime" placeholder="选择一个或多个日期">
          </el-date-picker>

        </el-form-item>
        <el-form-item>
          <div class="search-btn" @click="onSubmit"></div>
        </el-form-item>
        <el-form-item>
          <div class="reset-btn" @click="resetForm"></div>
        </el-form-item>
      </el-form>
    </div>
    <div style="font-size: 1.2rem;font-weight: bold; border-left: 0.5rem solid #4087f0;padding-left: 0.5rem;"> 图表模式
    </div>
    <div v-if="!show">
      <div class="box">
        <div class="main_box">
          <div class="title">
            <!-- <img style="margin-top: 15rem" src="@/assets/images/2.png" alt="" /> -->
          </div>
          <echarts ref="echarts_water" style="margin: 2rem" id="7"></echarts>
        </div>
      </div>

    </div>
    <div v-if="show">
      <div>
        <div class="box">
          <div class="main_box">
            <div class="title">
              <!-- <img style="margin-top: 15rem" src="@/assets/images/2.png" alt="" /> -->
            </div>
            <echarts ref="echarts_water" style="margin: 2rem" id="7" :series="echartsList"></echarts>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
import echarts from './echartsLink.vue'
import { getObjFishponds, getDataHisFeederAnalysis } from '@/api/breeding'
import { getObjBoxs, getFishpondsByBoxId } from '@/api/system'
import { getDataHisDataChart } from '@/api/home'
import mixin from '@/api/alarmgetCompany.js'
import moment from 'moment'
export default {
  mixins: [mixin],
  components: {
    echarts
  },
  data() {
    return {
      activeName: 'first',
      userType: '',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      value2: '',
      choose: [],
      searchForm: {
        companyId: '',
        baseId: '',
        box: '',
        ids: '',
        startAndEndTime: ''
      },
      linecharts: '1',
      series: [],
      show: false,
      FishpondDevicesList: [],
      boxsList: [],
      echartsList: [],
      fishList: []
    }
  },
  watch: {
    'searchForm.baseId': {
      handler(newValue, oldValue) {
        this.getObjBoxFishpondDevices()
      }
    }
  },
  created() {
    this.userType = Number(window.localStorage.getItem('userType'))
    this.searchForm.userType = this.userType
  },
  // 初始化加载
  mounted() {
    this.userType = Number(window.localStorage.getItem('userType'))
    this.searchForm.userType = this.userType
    this.getCompanyInfoTree()
  },
  methods: {
    // 获取日期
    getDates(val) {
      this.searchForm.startAndEndTime = val
    },
    handleClick(tab, event) {},
    getIds(val) {
      this.fishList = val
    },
    // 改变控制箱获取鱼池

    // 改变基地获取控制箱
    changeBase() {
      this.getObjBoxFishpondDevices()
      // this.getObjBoxFishpondDevices()
    },
    onSubmit() {
      if (this.searchForm.ids != '') {
        this.show = true
        let a = this.searchForm.startAndEndTime.map((item) => {
          return (item = `${moment(item).format('YYYY-MM-DD')},${moment(item).format('YYYY-MM-DD')}`)
        })
        a = a.join(';')
        let water = {
          ids: this.searchForm.ids,
          startAndEndTime: a,
          type: 0,
          model: 1
        }

        getDataHisFeederAnalysis(water).then((res) => {
          if (res.code == 200) {
            this.$refs.echarts_water.series = res.data
            console.log(this.$refs.echarts_water.series)
            this.$refs.echarts_water.getXY()
          }
        })

        this.show = true
      } else {
        this.show = false
      }
    },

    // 重置
    resetForm() {
      this.searchForm.boxs = ''
      this.searchForm.ids = ''
      this.searchForm.startAndEndTime = ''
      this.show = false
      console.log(this.show)
      this.onSubmit()
    },

    getObjBoxFishpondDevices() {
      getObjFishponds(this.searchForm).then((res) => {
        if (res.code == 200) {
          this.FishpondDevicesList = res.data
        }
      })
    },
    // 公司下拉切换
    changeTreeItem(val) {
      if (val) {
        this.searchForm.companyId = val[val.length - 1]
      } else {
        this.searchForm.companyId = ''
      }

      this.searchForm.baseId = ''
      this.baseArray = []

      // 获取角色列表
      this.getSysCompanyBases()
    }
  }
}
</script>
<style lang="less" scoped>
.main_box {
  display: flex;
  margin-top: 2rem;
  border-radius: 30px;
  width: 96%;
  background-color: #ffffff;
  box-shadow: 0px 5px 10px 2px rgba(0, 0, 0, 0.2);
}

.box {
  margin-left: 2rem;
  // margin: 5rem;
  margin-top: 0rem;
  // display: grid;
  // grid-template-columns: repeat(3, 1fr);
  width: 100%;
}

.bgc {
  background-color: #f4f8f9;
  min-height: 60rem;
}

/deep/.el-tabs__header {
  background-color: #ffffff;
}

/deep/.el-tabs__nav {
  margin-left: 1.5rem !important;
}
.color {
  color: #0dbc79;
  margin-left: 1.4rem;
}
</style>
